<template>
	<div class="dashboard-container flex flex-column">
		<div class="dashboard-header flex align-center">
			<img src="@/static/桂林人民LOGO.png" class="logo">
			<div class="title-box flex-auto" @click="jump('')" style="cursor: pointer">
				<div class="title">人才持续发展和满意度(未来潜力)</div>
				<div class="hospital-name">桂林市人民医院</div>
			</div>
			<div class="right-box flex align-center">
				<div class="time-box">
					<div class="current-time-label">当前时间</div>
					<div class="current-time-value">{{currentTime}}</div>
				</div>
				<div>
					<img src="@/static/医生图标.png" class="avatar">
					<div class="user-name">院长视角</div>
				</div>
			</div>
		</div>
		<div class="dashboard-main flex justify-content-space-between flex-auto"
			style="gap: 20px; height: calc(100vh - 120px);">
			<!-- 左边列 -->
			<div class="left-wrapper flex flex-column flex-auto" style="gap: 20px;">
				<!--  仪表区域      -->
				<div class="left-box flex-auto  flex justify-content-space-between" style="gap: 20px;">
					<div class="left-content flex-auto flex flex-column" style="gap: 20px;">
						<div class="chart0 flex-auto flex flex-column"
							style="padding: 20px;background-color:#1E293B;border-radius: 10px;gap: 20px;"
							@click="jump('/DoctorPerformance')">
							<div class="flex flex-column" style="gap: 20px;height: 250px;">
								<div class="flex align-center justify-content-space-between">
									<div class="flex align-center">
										<img src="@/static/科室与主任.png" style="display: block; width: 20px;height: 20px;margin-right: 10px;"
											alt="">
										<div>科室与主任绩效分析</div>
									</div>
									<div style="color: #ACAEB5">本月数据</div>
								</div>
								<div class="flex-auto flex" style="gap: 20px;">
									<div class="chart-wrapper flex-auto ">
										<ECharts :options="departmentAnalysisOptions" style="flex: 1;height: 100%;"></ECharts>
									</div>
									<div class="chart-wrapper flex-auto ">
										<ECharts :options="chiefSurgeonOptions" style="flex: 1;height: 100%;"></ECharts>
									</div>
								</div>
							</div>
							<div class="flex-auto">
								<ECharts :options="highValueConsumablesOptions" style="flex: 1;height: 100%;"></ECharts>
							</div>
						</div>
						<div class="chart1 flex flex-column"
							style="gap:20px;height: 250px;padding: 20px;background-color:#1E293B;border-radius: 10px">
							<div class="flex align-center justify-content-space-between">
								<div class="flex align-center">
									<img src="@/static/培养研究生.png" style="display: block; width: 20px;height: 20px;margin-right: 10px;"
										alt="">
									<div>医师培养投入产出分析</div>
								</div>
								<div style="color: #ACAEB5">本年数据</div>
							</div>

							<div class="flex flex-auto">
								<ECharts :options="medicalTrainingOptions" style="flex: 1;height: 100%;"></ECharts>
							</div>
						</div>
					</div>
					<div class="right-content  flex flex-column" style="width: 500px;gap: 20px">
						<div class="chart2 flex-auto flex flex-column"
							style="background-color:#1E293B;border-radius: 5px;padding: 20px">
							<div class="flex align-center justify-content-space-between">
								<div class="flex align-center">
									<img src="@/static/双满意度.png" style="display: block; width: 20px;height: 20px;margin-right: 10px;"
										alt="">
									<div>双满意度仪表盘</div>
								</div>
								<div style="color: #ACAEB5">本月数据</div>
							</div>
							<div class="flex flex-auto justify-content-space-between">
								<div class="flex-auto flex">
									<div class="flex flex-column flex-auto">
										<div class="flex-auto  flex-auto flex flex-column" style="width: 100%;margin-top: 10px">
											<ECharts :options="gaugeOption1.echarts" style="flex: 1;height: 100%;"></ECharts>
										</div>
										<div class="chart-wrapper flex flex-column justify-content-center ">
											<div style="text-align: center;font-size: 18px;">患者满意度</div>
											<div style="text-align: center;font-size: 14px;color: #00B4D8">环比
												<span style="color: #FF9F1C">{{gaugeOption1.data > 0?'↑':'↓'}}{{gaugeOption1.data}}%</span>
											</div>
										</div>
									</div>
								</div>
								<div class="flex-auto flex">
									<div class="flex flex-column flex-auto">
										<div class="flex-auto flex-auto flex flex-column" style="width: 100%;margin-top: 10px">
											<ECharts :options="gaugeOption2.echarts" style="flex: 1;height: 100%;"></ECharts>
										</div>
										<div class="chart-wrapper flex flex-column justify-content-center ">
											<div style="text-align: center;font-size: 18px;">员工满意度</div>
											<div style="text-align: center;font-size: 14px;color: #00B4D8">环比 <span
													style="color: #FF9F1C">{{gaugeOption2.data > 0?'↑':'↓'}}{{gaugeOption2.data}}%</span></div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="chart3 flex-auto flex flex-column"
							style="background-color:#1E293B;border-radius: 5px;padding: 20px">
							<div class="flex align-center">
								<img src="@/static/满意度趋势.png" style="display: block; width: 20px;height: 20px;margin-right: 10px;"
									alt="">
								<div>满意度趋势分析</div>
							</div>
							<div class="flex flex-auto">
								<ECharts :options="satisfactionTrendOptions" style="flex: 1;height: 100%;"></ECharts>
							</div>
						</div>
						<div class="chart4 flex-auto flex flex-column"
							style="background-color:#1E293B;border-radius: 5px;padding: 20px">
							<div class="flex align-center">
								<img src="@/static/患者满意度.png" style="display: block; width: 20px;height: 20px;margin-right: 10px;"
									alt="">
								<div>患者满意度词云</div>
							</div>
							<div class="flex flex-auto">
								<ECharts :options="wordCloudOption" style="flex: 1;height: 100%;"></ECharts>
							</div>
						</div>
					</div>
				</div>
				<div class="left-footer " style="height: 100px;padding: 20px;background-color: #1E293B;border-radius: 10px">
					<div class="flex align-center justify-content-space-between">
						<div class="flex align-center">
							<img src="@/static/年度科研.png" style="display: block; width: 20px;height: 20px;margin-right: 10px;" alt="">
							<div>产、学、研、教成果总结</div>
						</div>
						<div style="color: #ACAEB5">本月数据</div>
					</div>
					<div class="flex align-center" style="margin-top: 20px;color: #9BA0A8;font-size: 14px;">
						<div class="flex align-center" style="margin-right: 40px;">
							<img src="@/static/年度科研.png" style="display: block; width: 20px;height: 20px;margin-right: 10px;" alt="">
							<div>年度科研基金项目：<span
									style="color: #40A6D4;font-weight: bolder">{{achievements.researchingProjectTotal}}项</span></div>
						</div>
						<div class="flex align-center" style="margin-right: 40px;">
							<img src="@/static/科研基金.png" style="display: block; width: 20px;height: 20px;margin-right: 10px;" alt="">
							<div>科研基金总额：<span
									style="color: #3AA468;font-weight: bolder">¥{{achievements.researchingProjectFundTotalAmount}}</span>
							</div>
						</div>
						<div class="flex align-center" style="margin-right: 40px;">
							<img src="@/static/SCI论文数.png" style="display: block; width: 20px;height: 20px;margin-right: 10px;"
								alt="">
							<div>SCI论文数：<span style="color: #C1A01B;font-weight: bolder">{{achievements.sciPaperTotal}}篇</span></div>
						</div>
						<div class="flex align-center" style="margin-right: 40px;">
							<img src="@/static/影响因子.png" style="display: block; width: 20px;height: 20px;margin-right: 10px;" alt="">
							<div>影响因子总和：<span style="color: #C084FC;font-weight: bolder">{{achievements.impactFactorTotal}}</span>
							</div>
						</div>
						<div class="flex align-center" style="margin-right: 40px;">
							<img src="@/static/医师培养.png" style="display: block; width: 20px;height: 20px;margin-right: 10px;" alt="">
							<div>培养研究生：<span style="color: #5FA4F9;font-weight: bolder">{{achievements.graduateStudentTotal}}人</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 右边列 -->
			<div class="right-wrapper flex flex-column" style="width: 400px;gap: 20px;">
				<div class=" flex flex-column" style="max-height:480px;height: fit-content">
					<div class="flex align-center">
						<img src="@/static/人才流失.png" style="display: block; width: 20px;height: 20px;margin-right: 10px;" alt="">
						<div>人才流失风险预警</div>
					</div>
					<div style="margin-top: 20px;overflow-y: auto;">
						<div class="person-item"
							style="padding: 10px;background-color: #334155;border-radius: 10px;margin-bottom: 10px"
							v-for="(item, index) in doctors" :key="index">
							<div class="flex justify-content-space-between align-end" style="margin-bottom: 7px">
								<div style="font-size: 20px">{{item.name}}</div>
								<div style="margin-right: 100px">{{item.priority}}</div>
							</div>
							<div style="font-size: 16px">{{item.title}}</div>
							<div class="flex justify-content-space-between" style="margin-top: 7px;font-size: 16px">
								<div>合同到期:{{item.contractEnd}}</div>
								<div style="margin-right: 10px;color: #C4851B">{{item.status}}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="flex-auto flex flex-column ">
					<div class="flex align-center">
						<img src="@/static/实时舆情.png" style="display: block; width: 20px;margin-right: 10px;" alt="">
						<div>实时舆情监控</div>
					</div>
					<div style="margin-top: 20px;overflow-y: scroll;height: 730px">
						<div class="public-opinion-item"
							style="padding: 10px 20px;background-color: #334155;border-radius: 10px;margin-bottom: 10px">
							<div style="margin-bottom: 10px">
								<div class="flex align-center">
									<div style="width: 50px;color: #ADB3BE">正面</div>
									<div style="margin-left: 10px;font-size: 20px;letter-spacing: 2px;color: #ADB3BE">"医生非常专业,解释病情很耐心"
									</div>
								</div>
								<div style="margin-top: 10px;color: #ADB3BE">来源:卫健委平台·2小时前</div>
							</div>

						</div>
						<div class="public-opinion-item"
							style="padding: 10px 20px;background-color: #334155;border-radius: 10px;margin-bottom: 10px">
							<div style="margin-bottom: 10px">
								<div class="flex align-center">
									<div style="width: 50px;color: #ADB3BE">负面</div>
									<div style="margin-left: 10px;font-size: 20px;letter-spacing: 2px;color: #ADB3BE">"门诊等待时间过长,超过2小时"
									</div>
								</div>
								<div style="margin-top: 10px;color: #ADB3BE">来源:大众点评·今天</div>
							</div>

						</div>
						<div class="public-opinion-item"
							style="padding: 10px 20px;background-color: #334155;border-radius: 10px;margin-bottom: 10px">
							<div style="margin-bottom: 10px">
								<div class="flex align-center">
									<div style="width: 50px;color: #ADB3BE">正面</div>
									<div style="margin-left: 10px;font-size: 20px;letter-spacing: 2px;color: #ADB3BE">"医生非常专业,解释病情很耐心"
									</div>
								</div>
								<div style="margin-top: 10px;color: #ADB3BE">来源:卫健委平台·2小时前</div>
							</div>

						</div>
						<div class="public-opinion-item"
							style="padding: 10px 20px;background-color: #334155;border-radius: 10px;margin-bottom: 10px">
							<div style="margin-bottom: 10px">
								<div class="flex align-center">
									<div style="width: 50px;color: #ADB3BE">负面</div>
									<div style="margin-left: 10px;font-size: 20px;letter-spacing: 2px;color: #ADB3BE">"门诊等待时间过长,超过2小时"
									</div>
								</div>
								<div style="margin-top: 10px;color: #ADB3BE">来源:大众点评·今天</div>
							</div>

						</div>
						<div class="public-opinion-item"
							style="padding: 10px 20px;background-color: #334155;border-radius: 10px;margin-bottom: 10px">
							<div style="margin-bottom: 10px">
								<div class="flex align-center">
									<div style="width: 50px;color: #ADB3BE">正面</div>
									<div style="margin-left: 10px;font-size: 20px;letter-spacing: 2px;color: #ADB3BE">"医生非常专业,解释病情很耐心"
									</div>
								</div>
								<div style="margin-top: 10px;color: #ADB3BE">来源:卫健委平台·2小时前</div>
							</div>

						</div>
						<div class="public-opinion-item"
							style="padding: 10px 20px;background-color: #334155;border-radius: 10px;margin-bottom: 10px">
							<div style="margin-bottom: 10px">
								<div class="flex align-center">
									<div style="width: 50px;color: #ADB3BE">负面</div>
									<div style="margin-left: 10px;font-size: 20px;letter-spacing: 2px;color: #ADB3BE">"门诊等待时间过长,超过2小时"
									</div>
								</div>
								<div style="margin-top: 10px;color: #ADB3BE">来源:大众点评·今天</div>
							</div>

						</div>
						<div class="public-opinion-item"
							style="padding: 10px 20px;background-color: #334155;border-radius: 10px;margin-bottom: 10px">
							<div style="margin-bottom: 10px">
								<div class="flex align-center">
									<div style="width: 50px;color: #ADB3BE">正面</div>
									<div style="margin-left: 10px;font-size: 20px;letter-spacing: 2px;color: #ADB3BE">"医生非常专业,解释病情很耐心"
									</div>
								</div>
								<div style="margin-top: 10px;color: #ADB3BE">来源:卫健委平台·2小时前</div>
							</div>

						</div>
						<div class="public-opinion-item"
							style="padding: 10px 20px;background-color: #334155;border-radius: 10px;margin-bottom: 10px">
							<div style="margin-bottom: 10px">
								<div class="flex align-center">
									<div style="width: 50px;color: #ADB3BE">负面</div>
									<div style="margin-left: 10px;font-size: 20px;letter-spacing: 2px;color: #ADB3BE">"门诊等待时间过长,超过2小时"
									</div>
								</div>
								<div style="margin-top: 10px;color: #ADB3BE">来源:大众点评·今天</div>
							</div>

						</div>
						<div class="public-opinion-item"
							style="padding: 10px 20px;background-color: #334155;border-radius: 10px;margin-bottom: 10px">
							<div style="margin-bottom: 10px">
								<div class="flex align-center">
									<div style="width: 50px;color: #ADB3BE">正面</div>
									<div style="margin-left: 10px;font-size: 20px;letter-spacing: 2px;color: #ADB3BE">"医生非常专业,解释病情很耐心"
									</div>
								</div>
								<div style="margin-top: 10px;color: #ADB3BE">来源:卫健委平台·2小时前</div>
							</div>

						</div>
						<div class="public-opinion-item"
							style="padding: 10px 20px;background-color: #334155;border-radius: 10px;margin-bottom: 10px">
							<div style="margin-bottom: 10px">
								<div class="flex align-center">
									<div style="width: 50px;color: #ADB3BE">负面</div>
									<div style="margin-left: 10px;font-size: 20px;letter-spacing: 2px;color: #ADB3BE">"门诊等待时间过长,超过2小时"
									</div>
								</div>
								<div style="margin-top: 10px;color: #ADB3BE">来源:大众点评·今天</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import {
		nextTick,
		onMounted,
		ref
	} from 'vue'
	import ECharts from '@/components/ECharts.vue'
	import {
		useRouter
	} from 'vue-router'
	import {
		useCurrentTime
	} from '@/hooks/useCurrentTime'
	import {
		getFourAchievementsFun,
		getFourBrainDrainAlertFun,
		getFourChiefPhysicianFun,
		getFourDepartInfoCountFun,
		getFourHighMaterialCountFun,
		getFourPatientInfoFun,
		getFourPatientKeyWordFun,
		getFourSatisfiedPatientInfoFun,
		getFourSurgicalTimeCountFun
	} from "@/api/potential/index.js";
	const {
		currentTime
	} = useCurrentTime()
	const router = useRouter()
	const jump = (path) => {
		// router.push({
		// 	path: "/NavPage"
		// })
		if (path) {
			router.push(path)
		} else {
			router.go(-1)
		}
	}
	// 科室手术次数统计
	const departmentAnalysisOptions = ref({
		title: {
			text: '科室手术次数统计',
			left: 'left',
			top: 'top',
			textStyle: {
				fontSize: 14,
				fontWeight: 'normal',
				color: '#fff'
			}
		},
		tooltip: {
			trigger: 'item',
			axisPointer: {
				type: 'shadow'
			}
		},
		xAxis: {
			type: 'value',
			interval: 20,
			splitLine: {
				lineStyle: {
					color: '#333'
				}
			},
			axisLabel: {
				formatter: '{value}',
				color: '#bdb5b5' // 修改X轴标签字体颜色为白色
			}
		},
		yAxis: {
			type: 'category',
			data: ['妇产科', '普外科', '骨科', '肿瘤科', '神经外科', '心血管内科'],
			axisLabel: {
				color: '#bdb5b5'
			}
		},
		series: [{
			name: '手术次数',
			type: 'bar',
			itemStyle: {
				color: '#70C6F9'
			},
			label: {
				show: true,
				position: 'right',
				formatter: '{c}',
				color: '#bdb5b5'
			},
			data: [64, 86, 112, 78, 95, 128]
		}],
		grid: {
			left: '0%', // 左边贴边
			right: '8%', // 右边贴边
			bottom: '0%', // 下边贴边
			top: '15%', // 上边留出空间给标题
			containLabel: true
		},
	})
	// 主任医师手术时长统计
	const chiefSurgeonOptions = ref({
		title: {
			text: '主任医师手术时长统计',
			left: 'left',
			top: 'top',
			textStyle: {
				fontSize: 14,
				fontWeight: 'normal',
				color: '#fff'
			}
		},
		tooltip: {
			trigger: 'item',
			axisPointer: {
				type: 'shadow'
			}
		},
		xAxis: {
			type: 'category',
			data: ['黄明远', '李思雨', '王建国', '赵晓峰', '陈志强', '刘芳'],
			axisLabel: {
				color: '#bdb5b5',
				rotate: 45 // 可选：倾斜标签以避免重叠
			},
			axisLine: {
				lineStyle: {
					color: '#333'
				}
			}
		},
		yAxis: {
			type: 'value',
			name: '平均时长(分钟)',
			nameLocation: 'middle',
			nameGap: 30,
			min: 0,
			interval: 50,
			splitLine: {
				lineStyle: {
					color: '#333'
				}
			},
			axisLabel: {
				color: '#bdb5b5'
			}
		},
		series: [{
			name: '手术时长',
			type: 'bar',
			barWidth: '40%',
			itemStyle: {
				color: '#7231B8' // 使用与之前一致的颜色风格
			},
			label: {
				show: true,
				position: 'top',
				formatter: '{c}',
				color: '#fff'
			},
			data: [145, 128, 162, 118, 95, 132]
		}],
		grid: {
			left: '0%',
			right: '10%',
			bottom: '0%',
			top: '25%',
			containLabel: true
		},

	});
	//高值耗材使用统计
	const highValueConsumablesOptions = ref({
		title: {
			text: '高值耗材使用统计',
			left: 'left',
			top: 'top',
			textStyle: {
				fontSize: 16,
				fontWeight: 'normal',
				color: '#fff'
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			data: ['心血管支架', '骨科植入物', '神经介入材料', '肿瘤靶向药物'],
			left: 'center',
			top: '0%',
			textStyle: {
				color: '#fff'
			}
		},
		xAxis: {
			type: 'category',
			data: ['心血管内科', '神经外科', '肿瘤科', '骨科', '普外科'],
			axisLabel: {
				color: '#bdb5b5'
			},
			axisLine: {
				lineStyle: {
					color: '#333'
				}
			}
		},
		yAxis: {
			type: 'value',
			name: '金额(万元)',
			nameLocation: 'middle',
			nameGap: 30,
			min: 0,
			interval: 20,
			splitLine: {
				lineStyle: {
					color: '#333'
				}
			},
			axisLabel: {
				color: '#bdb5b5'
			}
		},
		series: [{
				name: '心血管支架',
				type: 'line',
				areaStyle: {
					opacity: 0.6,
					color: '#e5af5e'
				},
				lineStyle: {
					color: '#409eff'
				},
				symbol: 'circle',
				symbolSize: 8,
				itemStyle: {
					color: '#409eff'
				},
				data: [110, 75, 80, 100, 40]
			},
			{
				name: '骨科植入物',
				type: 'line',
				areaStyle: {
					opacity: 0.1,
					color: '#8870d4'
				},
				lineStyle: {
					color: '#67C23A'
				},
				symbol: 'circle',
				symbolSize: 8,
				itemStyle: {
					color: '#67C23A'
				},
				data: [90, 20, 20, 80, 20]
			},
			{
				name: '神经介入材料',
				type: 'line',
				areaStyle: {
					opacity: 0.6,
					color: '#4bc7ec'
				},
				lineStyle: {
					color: '#F56C6C'
				},
				symbol: 'circle',
				symbolSize: 8,
				itemStyle: {
					color: '#F56C6C'
				},
				data: [100, 65, 25, 95, 25]
			},
			{
				name: '肿瘤靶向药物',
				type: 'line',
				areaStyle: {
					opacity: 0.6,
					color: 'rgba(163,140,144,0.95)'
				},
				lineStyle: {
					color: '#9A66FF'
				},
				symbol: 'circle',
				symbolSize: 8,
				itemStyle: {
					color: '#9A66FF'
				},
				data: [85, 15, 10, 75, 35]
			}
		],
		grid: {
			left: '0%',
			right: '0%',
			bottom: '0%',
			top: '15%',
			containLabel: true
		},
	});
	//医师培养投入产出分析
	const medicalTrainingOptions = ref({
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			data: ['规培通过率', '进修人次', 'CMI值'],
			left: 'center',
			top: '-5px', // 向上移动图例
			textStyle: {
				color: '#fff'
			}
		},
		xAxis: {
			type: 'category',
			data: ['心血管内科', '肿瘤科', '神经外科', '消化内科', '呼吸内科', '骨科'],
			axisLabel: {
				color: '#bdb5b5'
			},
			axisLine: {
				lineStyle: {
					color: '#333'
				}
			}
		},
		yAxis: [{
				type: 'value',
				name: '通过率/人次',
				min: 0,
				interval: 20,
				splitLine: {
					lineStyle: {
						color: '#333'
					}
				},
				axisLabel: {
					color: '#bdb5b5'
				},
				position: 'left',
				nameGap: 15, // 微调与轴的距离（负值靠近顶部）
				nameTextStyle: {
					color: '#fdfdfd', // 红色文字
					fontSize: 14,
					align: 'left',
				}
			},
			{
				type: 'value',
				name: 'CMI值',
				min: 0,
				interval: 0.5,
				splitLine: {
					lineStyle: {
						color: '#333'
					}
				},
				axisLabel: {
					color: '#bdb5b5'
				},
				position: 'right',
				nameGap: 15,
				nameTextStyle: {
					color: '#fdfdfd', // 红色文字
					fontSize: 14,
				}
			}
		],
		series: [{
				name: '规培通过率',
				type: 'bar',
				barWidth: '10%',
				itemStyle: {
					color: '#409eff'
				},
				label: {
					show: true,
					position: 'top',
					formatter: '{c}',
					color: '#fff'
				},
				data: [85, 80, 75, 85, 70, 80]
			},
			{
				name: '进修人次',
				type: 'bar',
				barWidth: '10%',
				itemStyle: {
					color: '#73C24D'
				},
				label: {
					show: true,
					position: 'top',
					formatter: '{c}',
					color: '#fff'
				},
				data: [25, 20, 15, 20, 10, 15]
			},
			{
				name: 'CMI值',
				type: 'line',
				lineStyle: {
					color: '#F56C6C'
				},
				symbol: 'circle',
				symbolSize: 8,
				itemStyle: {
					color: '#F56C6C'
				},
				yAxisIndex: 1,
				data: [2.0, 2.5, 2.2, 1.8, 1.5, 2.0]
			}
		],
		grid: {
			left: '0%',
			right: '0%',
			bottom: '15%',
			top: '20%',
			containLabel: true
		},
	});
	// 仪表盘
	const gaugeOption1 = ref({
		data: '',
		echarts: {
			tooltip: {
				trigger: 'item',
				formatter: '{a} : {b} ({c}%)'
			},
			series: [{
				type: 'gauge',
				startAngle: 180,
				endAngle: 0,
				center: ['50%', '70%'],
				radius: '100%',
				splitNumber: 5,
				pointer: {
					show: true,
					width: 5,
					length: '50%',
				},
				axisLine: {
					lineStyle: {
						width: 15,
						color: [
							[0.3, '#F56C6C'],
							[0.7, '#F5A623'],
							[1.0, '#409eff']
						]
					}
				},
				axisTick: {
					splitNumber: 10,
					length: 5,
					lineStyle: {
						color: '#fff'
					}
				},
				axisLabel: {
					formatter: function(value) {
						if (value === 30) return '中';
						if (value === 70) return '良';
						if (value === 100) return '优';
						return '';
					},
					color: '#fff'
				},
				detail: {
					valueAnimation: true,
					formatter: '{value}',
					textStyle: {
						fontSize: 16,
						color: '#fff'
					}
				},
				data: [{
					value: 89.5,
					name: '患者满意度'
				}],
				title: {
					show: true,
					offsetCenter: [0, 15],
					textStyle: {
						fontSize: 12,
						color: '#fff'
					}
				}
			}]
		}
	});
	const gaugeOption2 = ref({
		data: '',
		echarts: {
			tooltip: {
				trigger: 'item',
				formatter: '{a} : {b} ({c}%)'
			},
			series: [{
				type: 'gauge',
				startAngle: 180,
				endAngle: 0,
				center: ['50%', '70%'],
				radius: '100%',
				splitNumber: 5,
				pointer: {
					show: true,
					width: 5,
					length: '50%',
				},
				axisLine: {
					lineStyle: {
						width: 15,
						color: [
							[0.3, '#F56C6C'],
							[0.7, '#F5A623'],
							[1.0, '#409eff']
						]
					}
				},
				axisTick: {
					splitNumber: 10,
					length: 5,
					lineStyle: {
						color: '#fff'
					}
				},
				axisLabel: {
					formatter: function(value) {
						if (value === 30) return '中';
						if (value === 70) return '良';
						if (value === 100) return '优';
						return '';
					},
					color: '#fff'
				},
				detail: {
					valueAnimation: true,
					formatter: '{value}',
					textStyle: {
						fontSize: 16,
						color: '#fff'
					}
				},
				data: [{
					value: 89.5,
					name: '员工满意度'
				}],
				title: {
					show: true,
					offsetCenter: [0, 15],
					textStyle: {
						fontSize: 12,
						color: '#fff'
					}
				}
			}]
		}
	});
	//满意度趋势分析
	const satisfactionTrendOptions = ref({
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			data: ['员工满意度', '患者满意度'],
			top: '0%',
			left: 'center',
			textStyle: {
				color: '#fff'
			}
		},
		xAxis: {
			type: 'category',
			data: ['7月', '8月', '9月', '10月', '11月', '12月'],
			axisLabel: {
				color: '#cebcbc'
			}
		},
		yAxis: {
			type: 'value',
			name: '满意度(%)',
			min: 0,
			interval: 20,
			nameTextStyle: {
				color: '#999' // 修改为白色
			},
			splitLine: {
				lineStyle: {
					color: '#333'
				}
			},
			axisLabel: {
				color: '#b8a7a7'
			}
		},
		series: [{
				name: '员工满意度',
				type: 'line',
				smooth: true,
				areaStyle: {
					opacity: 0.1,
					color: '#11e077'
				},
				lineStyle: {
					color: '#11e077'
				},
				symbol: 'circle',
				symbolSize: 4,
				itemStyle: {
					color: '#ffffff'
				},
				data: [56, 54, 56, 58, 58, 55]
			},
			{
				name: '患者满意度',
				type: 'line',
				smooth: true,
				areaStyle: {
					opacity: 0.1,
					color: '#409eff'
				},
				lineStyle: {
					color: '#409eff'
				},
				symbol: 'circle',
				symbolSize: 4,
				itemStyle: {
					color: '#ffffff'
				},
				data: [76, 74, 76, 78, 78, 75]
			}
		],
		grid: {
			left: '5%',
			right: '10%',
			bottom: '0%',
			top: '19%',
			containLabel: true
		},

	});
	//词云
	const wordCloudOption = ref({
		series: [{
			type: 'wordCloud',
			left: '5%',
			top: '5%',
			right: '5%',
			bottom: '5%',
			width: '90%',
			height: '90%',
			data: [{
					name: '服务周到',
					value: 80
				},
				{
					name: '诊断准确',
					value: 75
				},
				{
					name: '态度亲切',
					value: 70
				},
				{
					name: '流程高效',
					value: 65
				},
				{
					name: '用药合理',
					value: 60
				},
				{
					name: '随访及时',
					value: 55
				},
				{
					name: '技术精湛',
					value: 50
				}
			],
			textStyle: {
				fontFamily: 'Microsoft YaHei',
				fontWeight: 'bold',
				color: () => `rgb(${Math.random() * 200 + 55}, ${Math.random() * 200 + 55}, ${Math.random() * 200 + 55})`
			},
			shape: 'circle',
			fontSizeRange: [12, 40],
			rotationRange: [-45, 0, 45],
			gridSize: 10, // 词语间距
		}]
	})

	const doctors = ref([{
			name: '张明远',
			title: '主任医师·博士',
			contractEnd: '2024-03-15',
			priority: '高优先级',
			status: '待沟通'
		},
		{
			name: '李静怡',
			title: '副主任医师·博士',
			contractEnd: '2024-05-20',
			priority: '中优先级',
			status: '待沟通'
		},
		{
			name: '王建国',
			title: '主治医师·硕士',
			contractEnd: '2024-06-10',
			priority: '低优先级',
			status: '待沟通'
		},
		{
			name: '张明远',
			title: '主任医师·博士',
			contractEnd: '2024-03-15',
			priority: '高优先级',
			status: '待沟通'
		},
		{
			name: '李静怡',
			title: '副主任医师·博士',
			contractEnd: '2024-05-20',
			priority: '中优先级',
			status: '待沟通'
		},
		{
			name: '王建国',
			title: '主治医师·硕士',
			contractEnd: '2024-06-10',
			priority: '低优先级',
			status: '待沟通'
		}
	])
	const achievements = ref({
		researchingProjectName: null,
		researchingProjectTotal: "24",
		researchingProjectFundAmount: null,
		researchingProjectFundTotalAmount: "422243",
		sciPaperName: null,
		sciPaperTotal: "14",
		impactFactor: null,
		impactFactorTotal: "33",
		graduateStudentName: null,
		graduateStudentTotal: "14",
		creationTime: "0001-01-01 00:00:00"
	})
	// -----------------------------------------------
	// 科室手术次数统计
	const fourDepartInfoApi = (data) => {
		console.log("[]科室手术次数统计[]", data)
		let yAxis = [];
		let seriesData = [];
		data.displayDepartmentSurgeryDtoList.forEach(item => {
			yAxis.push(item.departmentName);
			seriesData.push(item.departmentSurgeryTotalTimes);
		});
		nextTick(() => {
			departmentAnalysisOptions.value.yAxis.data = yAxis;
			departmentAnalysisOptions.value.series[0].data = seriesData;
		});

	};
	// 主任医师手术时常统计
	const fourSurgicalTimeCountApi = (data) => {
		let xAxis = [];
		let seriesData = [];
		data.displayDepartmentSurgeryDtoList.forEach(item => {
			xAxis.push(item.pnName);
			seriesData.push(item.pnSurgeryTotalTimes);
		});
		nextTick(() => {
			chiefSurgeonOptions.value.xAxis.data = xAxis;
			chiefSurgeonOptions.value.series[0].data = seriesData;
		});
	};
	// 高值耗材统计使用 todo... 有问题
	const fourHighMaterialCountApi = (data) => {
		// console.log("高值耗材统计使用",data)
		// let consumable = [];  // 耗材
		// let departments = []; // 科室
		// let seriesData = [];  // 系列数值
		// data.revenueEnergyInfoDtoList.forEach(item => {
		//   consumable.push(item.revenueName);
		//   departments.push(item.departmentName);
		//   seriesData.push(item.revenueTotalFee);
		// });
		// // await nextTick(() => {
		// //   highValueConsumablesOptions.value.legend = consumable;
		// //   highValueConsumablesOptions.value.xAxis.data = departments;
		// //
		// // });

	};
	// 满意度仪表盘
	const fourPatientInfoApi = async (data) => {
		console.log("满意度仪表盘", data)
		gaugeOption1.value.data = data.personSurveyRatio;
		gaugeOption1.value.echarts.series[0].data[0].value = data.today_PersonSurveyRatio; // 患者满意度
		gaugeOption2.value.data = data.empSurveyRatio;
		gaugeOption2.value.echarts.series[0].data[0].value = data.today_EmpSurveyRatio; // 员工满意度

	};
	// 医师培养投入产出分析
	const fourChiefPhysicianApi = (data) => {
		let passing = []; // 规培通过率
		let cmi = []; // CMI
		let trainees = []; // 进修人员
		let depart = []; // 科室人员
		data.forEach(item => {
			passing.push(item.passInfoCountRatio);
			depart.push(item.departmentName);
			cmi.push(item.cmiValue);
			trainees.push(item.doctorDepartmentCount);
		});
		nextTick(() => {
			medicalTrainingOptions.value.xAxis.data = depart;
			medicalTrainingOptions.value.series[0].data = passing;
			medicalTrainingOptions.value.series[1].data = trainees;
			medicalTrainingOptions.value.series[2].data = cmi;
		});
	};
	// 患者满意度词云
	const fourPatientKeyWordApi = (data) => {
		let seriesData = [];
		data.forEach(item => {
			seriesData.push({
				name: item.personPromptName,
				value: Math.floor(Math.random() * 71) + 20
			});
		});
		wordCloudOption.value.series[0].data = seriesData;
	};
	// 满意度趋势分析
	const fourSatisfiedPatientInfoApi = (data) => {
		let xAxis = [];
		let personSurveySeriesData = []; // 患者
		let empSurveySeriesData = []; // 员工
		data.personSurveyRatioList.forEach(item => {
			xAxis.push(item.year + "年" + item.month + "月");
			personSurveySeriesData.push(item.surveyCountRatio);
		});
		data.empSurveyRatioList.forEach(item => {
			empSurveySeriesData.push(item.surveyCountRatio);
		});
		console.log("[]", xAxis)
		nextTick(() => {
			satisfactionTrendOptions.value.xAxis.data = xAxis;
			satisfactionTrendOptions.value.series[0].data = personSurveySeriesData;
			satisfactionTrendOptions.value.series[1].data = empSurveySeriesData;
		})

	};
	// 产、学、研、教成果总结
	const fourAchievementsApi = async (data) => {

		achievements.value = data;
	};
	// 人才流失风险预警
	const fourBrainDrainAlertApi = async (data) => {
		let list = [];
		data.doctorInfoList.forEach(item => {
			list.push({
				name: item.doctorName,
				title: item.doctorTitleLevel + item.doctorEducational,
				contractEnd: item.contractEndtDate,
				priority: item.talentWarningLevel,
				status: '待沟通' // todo.... 无值，待处理
			})
		});
		doctors.value = list;
	};
	const updateDashboardCharts = async () => {
		const results = await Promise.allSettled([
			getFourDepartInfoCountFun(),
			getFourSurgicalTimeCountFun(),
			getFourHighMaterialCountFun(),
			getFourPatientInfoFun(),
			getFourChiefPhysicianFun(),
			getFourSatisfiedPatientInfoFun(),
			getFourPatientKeyWordFun(),
			getFourAchievementsFun(),
			getFourBrainDrainAlertFun(),
		]);
		if (results[0].status == 'fulfilled' && results[0].value.data.code == 200) {
			await fourDepartInfoApi(results[0].value.data.data);
		}
		if (results[1].status == 'fulfilled' && results[1].value.data.code == 200) {
			await fourSurgicalTimeCountApi(results[1].value.data.data);
		}
		// todo...接口数据不匹配
		if (results[2].status == 'fulfilled' && results[2].value.data.code == 200) {
			//  await fourHighMaterialCountApi(results[2].value.data.data);
		}
		if (results[3].status == 'fulfilled' && results[3].value.data.code == 200) {
			await fourPatientInfoApi(results[3].value.data.data);
		}
		if (results[4].status == 'fulfilled' && results[4].value.data.code == 200) {
			await fourChiefPhysicianApi(results[4].value.data.data);
		}
		if (results[5].status == 'fulfilled' && results[5].value.data.code == 200) {
			await fourSatisfiedPatientInfoApi(results[5].value.data.data);
		}
		if (results[6].status == 'fulfilled' && results[6].value.data.code == 200) {
			await fourPatientKeyWordApi(results[6].value.data.data);
		}
		if (results[7].status == 'fulfilled' && results[7].value.data.code == 200) {
			await fourAchievementsApi(results[7].value.data.data);
		}
		if (results[8].status == 'fulfilled' && results[8].value.data.code == 200) {
			await fourBrainDrainAlertApi(results[8].value.data.data)
		}
	};
	onMounted(() => {
		updateDashboardCharts();
	});
</script>
<style scoped lang="less">
	.dashboard-container {
		width: 100%;
		height: 100%;
		background-color: #0F172A;
		font-family: 'Microsoft YaHei', sans-serif;
		color: var(--text-color);
		padding: 10px 20px;
		box-sizing: border-box;

		.dashboard-header {
			padding: 10px 0;

			.logo {
				width: 60px;
				height: 60px;
				border-radius: 50%;
			}

			.title-box {
				margin-left: 20px;

				.title {
					font-size: 21px;
					font-weight: bolder;
				}

				.hospital-name {
					font-size: 14px;
					padding-top: 5px;
					color: #818999;
				}
			}

			.right-box {
				.time-box {
					margin-right: 20px;

					.current-time-label {
						font-size: 12px;
						color: #818999;
					}

					.current-time-value {
						font-size: 18px;
						padding-top: 5px;
						font-weight: bolder;
					}

				}

				.avatar {
					width: 50px;
					height: 50px;
					border-radius: 50%;
					margin: 0 auto;
					display: block;
				}

				.user-name {
					font-size: 12px;
					padding-top: 5px;
					color: #818999;
				}
			}
		}

		.dashboard-main {
			margin-top: 10px;

			.left-wrapper {
				border-radius: 5px;

				//padding: 20px;
			}

			.right-wrapper {
				background-color: #1E293B;
				border-radius: 5px;
				padding: 20px;
			}

		}
	}
</style>